<template>
<page>
  <head title="line item"></head>
  <scroller class="wrapper">
    <div class="stepBox">
      <text class="line"></text>
      <text class="cicle active">1</text>
      <text class="cicle" :class="[orderStatus>2?'active':'']">2</text>
      <text class="cicle" :class="[orderStatus>3?'active':'']">3</text>
      <text class="cicle" :class="[orderStatus>4?'active':'']">4</text>
      <div class="ciclebox">
        <text class="step1 activeStep">Unpaid</text>
        <text class="step2" :class="[orderStatus>2?'activeStep':'']">Waiting for shipping</text>
        <text class="step3" :class="[orderStatus>3?'activeStep':'']">Shipped</text>
        <text class="step4" :class="[orderStatus>4?'activeStep':'']">Successful trade</text>
      </div>
    </div>
    <div class="section1">
      <!-- 未支付状态 -->
      <div class="secTop" v-if="orderStatus==1">
        <text class="secTit">Buyer unpaid</text>
        <text class="secinfo">Payment will be cancelled in {{hours }} hours {{minutes}} minutes</text>
      </div>
      <!-- 已支付未发货 -->
      <div class="waitShip" v-if="orderStatus==2">
        <div class="orderMes">
          <text class="paidtip">Buyer paid,Please deliver the goods as soon as possible.</text>
          <text
            class="shipTime"
          >{{days }}days, {{hours }} hours, {{minutes}} minutes, the system will automatically cancel the transaction, please ship as soon as possible</text>
          <text class="buyers">{{goodInfo.name}} {{goodInfo.phone}}</text>
          <text class="buyAddress">{{goodInfo.address}}</text>
          <div class="connectBox">
            <!-- <text class="connect">Contact buyers</text> -->
          </div>
        </div>
      </div>
      <!-- 物流输入 -->
      <div class="wuliuMes" v-if="orderStatus==2">
        <div class="inputBox">
          <text class="inputTit">Shipment number</text>
          <input class="inputCell" v-model="shipmentN" />
        </div>
        <div class="inputBox">
          <text class="inputTit">Delivery company</text>
          <text class="inputCell">Australia Post Tracking</text>
        </div>
      </div>
      <!-- 物流信息 -->
      <div class="wuliuMes" v-if="orderStatus==3||orderStatus==4">
        <text class="paidtip">Delivery tracking</text>
        <div class="devList" v-if="traces.length>0">
          <div
            class="itemList"
            v-for="(item,index) in traces"
            :key="index"
            v-if="isAll?index>0:index<2"
          >
            <div class="lineBox">
              <text class="itemTit">{{item.AcceptStation}}</text>
              <text class="itemDec">{{item.AcceptTime|formatDateTime}}</text>
            </div>
            <text class="radio" :class="[index==0?'activeR':'']"></text>
          </div>
          <div class="Expand" v-if="!isAll" @click="isAll=true">
            <text class="ExpandTxt">Expand</text>
            <text class="ExpandIcon">&#xe60a;</text>
          </div>
        </div>
      </div>
      <div class="secCon">
        <text class="conBtn">Contact buyers</text>
        <text class="orders">orders</text>
        <div class="conSec" v-for="(item,index) in goodInfo.list" :key="index">
          <image class="goodImg" :src="item.thumb" />
          <div class="goodInfo">
            <text class="goodsName">{{item.title}}</text>
            <text class="goodsStu">Brand new</text>
            <div class="goodsPri">
              <text class="price">AU$ {{item.price}}</text>
              <text class="priTips">（Free shipping）</text>
            </div>
          </div>
        </div>
        <text class="orderTime">Order time：{{goodInfo.create_time|formatDateTime}}</text>
        <text class="orderTime">Payment time：{{goodInfo.pay_time|formatDateTime}}</text>
        <text class="orderTime">Shipping methods：{{goodInfo.take_type==1?'Delivery':'Delivery'}}</text>
      </div>
    </div>
  </scroller>
  <div class="bottomBtn" v-if="orderStatus==2">
    <text class="shipment" @click="confirmShip">Confirm shipment</text>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div> 
</page>
</template>

<script>
import {
  get_order_coInfo,
  add_tracking,
  get_order_express
} from "../../mixin/ajax.js";
import asCore from "../../mixin/core";
export default {
  data() {
    return {
      isAll: false,
      days: "",
      hours: "",
      minutes: "",
      seconds: "",
      OrderCode: "",
      traces: [],
      users_id: "",
      orderId: "",
      shipmentN: "",
      shipmentC: "",
      goodInfo: {
        list: []
      }
    };
  },
  computed: {
    orderStatus() {
      if (this.goodInfo.type_2 == 1 || this.goodInfo.type == 3) {
        return 2; //已支付
      } else if (this.goodInfo.type_2 == 2) {
        return 3; //已发货
      } else if (this.goodInfo.type_2 == 3) {
        return 4; //已收货
      } else {
        return 1; //未支付
      }
    }
  },

  methods: {
    onLoad(parmar) {
      if (parmar && parmar.param) {
        return false;
      }
      this.orderId = parmar.id;
      asCore.getBsessionid(userId => {
        this.users_id = userId;
        this.getOrderDetail();
      });
    },
    confirmShip() {
      if (!this.shipmentN) {
        this.toast("Please enter shipment number");
        return false;
      }
      add_tracking(
        {
          users_id: this.users_id,
          co_order_id: this.orderId,
          logistic_code: this.shipmentN,
          logistic: "Australia Post Tracking",
          shipper_code: "AUSTRALIA"
        },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
            this.getOrderDetail();
          }
        }
      );
    },
    getoverTime(end_time) {
      var endDate = new Date(end_time * 1000);
      //当前时间
      var nowDate = new Date();
      //相差的总秒数
      var totalSeconds = parseInt((endDate - nowDate) / 1000);
      //天数
      this.days = Math.floor(totalSeconds / (60 * 60 * 24));
      //取模（余数）
      var modulo = totalSeconds % (60 * 60 * 24);
      //小时数
      this.hours = Math.floor(modulo / (60 * 60));
      modulo = modulo % (60 * 60);
      //分钟
      this.minutes = Math.floor(modulo / 60);
      //秒
      this.seconds = modulo % 60;
    },
    getOrderDetail() {
      get_order_coInfo(
        { users_id: this.users_id, co_order_id: this.orderId },
        (res, flag) => {
          
          if (flag) {
            if (res.code == 200) {
              this.goodInfo = res.data;
              if (res.data.type == "2") {
                this.getoverTime(res.data.end_time);
              } else if (res.data.type_2 == "1") {
                // var endDate = new Date(res.data.pay_time + 5 * 24 * 60 * 60);
                // this.getoverTime(endDate);
              } else if (res.data.type_2 == "2" || res.data.shipper_code) {
                this.getExpress(res.data.shipper_code, res.data.logistic_code);
              }
            }
          }
        }
      );
    },
    getExpress(shipper_code, logistic_code) {
      get_order_express(
        { shipper_code: shipper_code, logistic_code: logistic_code },
        (res, flag) => {
          if (flag) {
            this.OrderCode = res.OrderCode; //物流运单号
            this.traces = res.Traces;
          }
        }
      );
    }
  }
};
</script>

<style scoped>
.wrapper {
  background-color: #f5f5f5;
  flex: 1;
}
.bottomBtn {
  height: 120px;
  width: 750px;
  justify-content: center;
  align-items: center;
}
.shipment {
  width: 686px;
  height: 80px;
  background-color: rgba(48, 48, 48, 1);
  font-size: 32px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 80px;
  border-radius: 5px;
}
.shipment:active {
  background-color: #000;
}

.stepBox {
  width: 750px;
  height: 275px;
  position: relative;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
}

.line {
  width: 657px;
  height: 2px;
  background-color: #d8d8d8;
  position: absolute;
  top: 141px;
  left: 47px;
}

.ciclebox {
  position: absolute;
  width: 750px;
  height: 275px;
  left: 0;
  top: 0;

  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

.cicle {
  border-radius: 75px;
  width: 75px;
  height: 75px;
  border-width: 1px;
  border-style: solid;
  border-color: #d8d8d8;
  background-color: #ffffff;
  text-align: center;
  line-height: 75px;
}

.step1 {
  margin-left: 40px;
  margin-top: 150px;
  font-size: 28px;
  color: #999999;
}

.step2 {
  margin-bottom: 150px;
  color: #999999;
  font-size: 28px;
}

.step3 {
  margin-top: 150px;
  color: #999999;
  font-size: 28px;
}

.step4 {
  margin-bottom: 150px;
  font-size: 28px;
  color: #999999;
}

.active {
  background-color: #ba8833;
  border-color: #ba8833;
  color: #ffffff;
}

.activeStep {
  color: #ba8833;
}

.section1 {
  margin-top: 20px;
  width: 750px;
  background-color: #ffffff;
}

.secTop {
  width: 750px;
  padding: 32px 32px 25px;
  border-bottom-width: 1px;
  border-bottom-color: #e8e8e8;
  border-style: solid;
}

.secTit {
  font-size: 32px;
  color: #383838;
}

.secinfo {
  margin-top: 10px;
  font-size: 22px;
  color: #383838;
}

.waitShip {
  background-color: #ffffff;
}

.orderMes {
  padding: 32px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #d8d8d8;
}

.paidtip {
  font-size: 32px;
  color: #383838;
}

.shipTime {
  color: #383838;
  font-size: 22px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.buyers {
  color: #303030;
  font-size: 26px;
  margin-top: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

.buyAddress {
  color: #303030;
  font-size: 26px;
}

.connectBox {
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 20px;
  padding-bottom: 10px;
}

.connect {
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #303030;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
}

.connect:active {
  background-color: #dddddd;
}

.wuliuMes {
  padding: 32px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #d8d8d8;
}

.inputBox {
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.inputTit {
  color: #333333;
  font-size: 24px;
  width: 210px;
}

.inputCell {
  flex: 1;
  height: 48px;
  border-width: 1px;
  border-color: #cdcdcd;
  border-style: solid;
  border-radius: 4px;
  padding-left: 20px;
}

.devList {
  padding-top: 20px;
  position: relative;
}
.Expand {
  position: absolute;
  right: 0;
  bottom: 0;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.ExpandTxt {
  color: #888888;
  font-size: 16px;
  margin-right: 15px;
}
.ExpandIcon {
  font-family: iconfont;
  color: #888888;
  font-size: 30px;
}
.itemList {
  padding-left: 6px;
  margin-left: 6px;
  /* border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #D8D8D8; */
  position: relative;
}

.lineBox {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #d8d8d8;
  padding-left: 20px;
  padding-bottom: 20px;
}

.radio {
  position: absolute;
  left: 0px;
  top: 0;
  background-color: #888888;
  width: 12px;
  height: 12px;
  border-radius: 6px;
}

.itemTit {
  color: #888888;
  font-size: 20px;
}

.itemDec {
  color: #888888;
  font-size: 16px;
}

.secCon {
  padding: 32px;
  position: relative;
}

.conBtn {
  position: absolute;
  right: 32px;
  top: 40px;
  background-color: #303030;
  height: 60px;
  line-height: 60px;
  color: #ffffff;
  font-size: 32px;
  padding: 0 20px;
}

.conBtn:active {
  background-color: #dddddd;
}

.orders {
  color: #303030;
  font-size: 32px;
}

.conSec {
  margin-top: 20px;
  flex-direction: row;
  margin-bottom: 20px;
}

.goodImg {
  width: 132px;
  height: 132px;
  margin-right: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: #dfdfdf;
}

.goodInfo {
  justify-content: flex-end;
}

.goodsName {
  color: #303030;
  font-size: 30px;
}

.goodsStu {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #888888;
  font-size: 22px;
}

.goodsPri {
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.price {
  color: #ec414d;
  font-size: 30px;
  margin-right: 15px;
}

.priTips {
  font-size: 26px;
  color: #666666;
}

.orderTime {
  font-size: 26px;
  color: #888888;
  margin-top: 10px;
}
</style>
